<template>
  <div>
    <div v-if="!detailInfo.img">加载中...</div>
    <div
      v-if="detailInfo.img"
      class="detail"
      :style="{ background: detailInfo.backgroundColor }"
    >
      <nav>猫眼电影 > {{ detailInfo.nm }}</nav>
      <div class="movie-info-top">
        <img :src="detailInfo.img | filterImg" alt="" />
      </div>
      <button @click="fn">猜你喜欢</button>
    </div>
  </div>
</template>

<script>
// import { getDetailDataApi } from "@/utils/api";
// import NProgress from "nprogress";

import { mapState, mapActions } from "vuex";

export default {
  props: ["id"],

  // 在路由确认之前执行
  // async beforeRouteEnter(to, from, next) {
  //   NProgress.start();
  //   // 在这里是不能取到this得
  //   // 先去请求数据，请求得到以后再next
  //   const res = await getDetailDataApi({
  //     // 动态参数要用to去获取
  //     id: to.params.id,
  //   });
  //   NProgress.done();
  //   // this.detailInfo = res.result;
  //   next((vm) => (vm.detailInfo = res.result));
  // },
  // 动态路由改变，页面没有重新渲染
  // watch: {
  //   $route(to) {
  //     // 请求数据
  //   }
  // },
  // beforeRouteUpdate(to, from, next) {
  //   this.getDetailInfo(to.params.id);
  //   next();
  // },

  computed: mapState({
    detailInfo: (state) => state.detail.detailInfo,
  }),
  mounted() {
    this.getDetailInfoAsync({
      id: this.id,
    });
  },
  methods: {
    ...mapActions("detail", ["getDetailInfoAsync"]),
    fn() {
      this.$router.push("/detail/1357206");
    },
  },
  filters: {
    filterImg(val) {
      // 做一个容错处理
      // 当数据没有请求到得时候，val是undefined，split方法报错，所以要加判断
      return val ? val.split("/w.h").join("/100.138") : "";
    },
  },
};
</script>
<style lang="less" scoped>
.detail {
  padding: 21px 16px;
  height: 400px;
  font-size: 14px;

  nav {
    margin-bottom: 0.3rem;
    color: #ccc;
  }

  .movie-info-top {
    height: 138px;
    background: #ccc;
  }
}
</style>
